<template>
    <div class="layout-container mask-all animated-style">
        <Spin fix v-if="loading" size="large"></Spin>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 slide、fade-->
        <transition transname="custom"
            :enter-active-class="animated.in"
            :leave-active-class="animated.out">
            <router-view></router-view>
        </transition>
        <template v-for="(frame, index) in frames">
            <IviewFrame 
                ref="frames"
                :key="frame.id"
                :title="frame.title"
                :icon="frame.icon" 
                :header="frame.header"
                :footer="frame.footer"
                :zIndex="frame.zIndex"
                :width="frame.width"
                :height="frame.height"
                :closable="frame.closable"
                :max="frame.max"
                :fullscreen="frame.fullscreen"
                :maskClose="frame.maskClose"
                :mask="frame.mask"
                :resizable="frame.resizable"
                :dragable="frame.dragable"
                :position="frame.position"
                :transparent="frame.transparent"
                :animateIn="frame.animateIn"
                :animateOut="frame.animateOut"
                @on-close="onFrameClose(frame, index)"
                @on-frame="frame.onGetFrame">
                <component 
                    :params="frame.params"
                    :is="frame.component" 
                    @callback="frame.callback"
                    @close="onClose(frame, index)"></component>
            </IviewFrame>
        </template>
    </div>
</template>
<script>
import { Spin } from 'view-design';
import { bind, init, setting, each } from 'config/utils.js';
import { IviewFrame } from 'cloudbase-components';

const pageOrder = [
    "/login",
    "/loading",
    "/theme/normal",
    "/theme/window"
];

export default {
    data() {
        return {
        	animated: {
                in: "animated bounceIn",
                out: "animated bounceOut"
            },
            frames: []
        }
    },
    computed: {

        loading() {
            return this.$store.state.loading;
        },
        theme() {
            return this.$store.state.theme;
        }

    },
    methods: {
        init() {
            bind(this);
            this.$router.replace("/loading");
            init();
        },
        addFrame(options) {
            this.frames.push(options);
        },
        closeAllFrames() {
            var frames = this.$refs.frames;
            if(frames) {
                if(frames instanceof Array) {
                    for(var i=frames.length - 1; i > -1; i --) {
                        frames[i].close();
                    }
                } else {
                    frames.close();
                }
            }
        },
        onFrameClose(frame, index) {
            frame.onFrameClose();
            this.frames.splice(index, 1);
        },
        onClose(frame, index) {
            var frames = this.$refs.frames;
            if(frames) {
                frames[index].close();
            }
        }
    },
    watch: {
        theme(newValue, oldValue) {
            var from = oldValue && oldValue != '' ? "/theme/" + oldValue : "/loading";
            var to = null;
            if(newValue != '') {
                to = "/theme/" + newValue;
                if(oldValue && oldValue != '') {
                    //记录配置
                    setting("desktop", newValue);
                }
            } else {
                to = "/login";
            }
            var orderFrom = pageOrder.indexOf(from);
            var orderTo = pageOrder.indexOf(to);
            if(orderTo > orderFrom) {
                this.animated.in = 'animated fadeInRight'; 
                this.animated.out = 'animated fadeOutLeft'; 
            } else {
                this.animated.in = 'animated fadeInLeft'; 
                this.animated.out = 'animated fadeOutRight'; 
            }
            this.$nextTick(() => {
                this.closeAllFrames();
                this.$router.replace(to);
            });
        }
    },
    mounted: function() {
        document.title = this.$t('system.name');
        this.$nextTick(function() {
            this.init();
        });
    },
    components: {
        Spin,
        IviewFrame
    }
}
</script>
<style type="text/css">
    .mask-all .ivu-spin-fix {
        z-index: 1000;
    }
</style>